<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>在这个框框里划几下试试</title>
<style type="text/css">
#_canvas{
	background-color: rgb(240,240,240);
	margin-left: 80px;
	border: gray 1px solid;
}
p{
	margin-top: 80px;
	margin-left: 80px;
}
</style>
	</head>
<body>
<p>说明：在这个框框里划几下试试</p>
<canvas id="_canvas">sorry, your broswer does not support html5!</canvas>
<script type="text/javascript">
var canvas_ = document.getElementById("_canvas");
//全屏
//canvas_.setAttribute("width",screen.width);
//canvas_.setAttribute("height",screen.height);
//另设宽高
canvas_.setAttribute("width",1200);
canvas_.setAttribute("height",800);

var context = canvas_.getContext("2d");
context.strokeStyle = "blue";
context.lineWidth = 3;
 
var array_paint = [];
var current_y = 0;
var current_x = 0;
//判断鼠标是否按下
var m_down = false;
function paint(){
	context.beginPath();
	context.moveTo(array_paint[0][0],array_paint[0][1]);
	if(array_paint.length == 1){
		context.lineTo(array_paint[0][0] +1,array_paint[0][1] +1);
	}else{
		var i =1; 
		for(i in array_paint){
			context.lineTo(array_paint[i][0],array_paint[i][1]);
			context.moveTo(array_paint[i][0],array_paint[i][1]);
		}
	}
	context.closePath();
	context.stroke();
}

//按下鼠标
canvas_.onmousedown = function(event){
	m_down = true;
	current_x = event.offsetX;
	current_y = event.offsetY;
	array_paint.push([current_x,current_y]);
	paint();
}

//鼠标松开,清空数据
canvas_.onmouseup = function(event){
	m_down = false;
	array_paint = [];
}

//鼠标按下后拖动
canvas_.onmousemove = function(event){
	if(m_down){
		current_x = event.offsetX;
		current_y = event.offsetY;
		array_paint.push([current_x,current_y]);
		paint();
	}
}
</script>
</body>
<script type="text/javascript" src="/public/js/footer.js"></script>
</html>
